<template>
  <div class="content">
    <p class="info">网站重点围绕“专题图”、“信息分析”、“信息成果”、“信息检索”、“知识学习”、“服务案例”等模块，提供数据资源的相关信息服务。
      所提供的产品信息服务仅供用户参考使用。可进行检索和下载，如需更多服务，用户可提出申请，本站将综合考虑您的需求给予回复。</p>
    <el-divider border-style="dashed"></el-divider>
    <p style="text-align: center;font-weight: bold;font-size: 24px;margin: 30px auto;">定制服务申请</p>
    <el-form :model="queryParams" ref="queryRef" :rules="rules" label-width="120px">
      <el-form-item label="服务类型" prop="serviceType">
        <el-checkbox-group v-model="queryParams.serviceType">
          <el-checkbox-button v-for="(item, index) in ['专题图', '信息分析', '信息成果', '信息检索', '知识学习', '其它']" :key="index"
            :label="item">
            {{ item }}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="服务用途" prop="servicePurpose">
        <el-checkbox-group v-model="queryParams.servicePurpose">
          <el-checkbox-button v-for="(item, index) in ['政府', '行业', '科研', '商业', '个人']" :key="index" :label="item">
            {{ item }}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="服务描述" prop="serviceDescription">
        <el-input v-model="queryParams.serviceDescription" type="textarea" maxlength="300" show-word-limit
          :autosize="{ minRows: 4, maxRows: 5 }" placeholder="请输入服务描述" />
      </el-form-item>
      <el-form-item label="申请人" prop="applicant">{{ queryParams.applicant }}</el-form-item>
      <el-form-item label="联系电话" prop="telephone">{{ queryParams.telephone }}</el-form-item>
      <p style="text-align:center"><el-button type="primary" @click="submitEvent">提交申请</el-button></p>
    </el-form>
  </div>
</template>

<script setup name="customizedService">
import { ElMessage, ElMessageBox } from 'element-plus'
import { getUserId, getToken } from '@/utils/auth'
import { getPurpose, submit } from "@/api/serviceCase/customizedService.js"
import useUserStore from '@/store/modules/user'
import useProxyStore from '@/store/modules/proxy'
const proxyStore = useProxyStore()
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const name = computed(() => userStore.name);
const islogin = computed(() => !!userStore.name);
const tel = computed(() => userStore.tel);
const option = ref([]);
const data = reactive({
  queryParams: {
    serviceType: [],
    servicePurpose: [],
    serviceDescription: undefined,
    applicant: name,
    telephone: tel,
  },
})
const { queryParams, } = toRefs(data);
const rules = ref({
  serviceType: [{ required: true, message: "服务类型不能为空", trigger: "change" }],
  servicePurpose: [{ required: true, message: "服务用途不能为空", trigger: "change" }],
  serviceDescription: [{ required: true, message: "服务描述不能为空", trigger: "blur" }],
})

// 判断是否登陆
function needLogin() {
  ElMessageBox.confirm('请先进行登陆！！', '消息', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    // getList();
    router.push(`/login?toUrl=${location.href}`)
  }).catch(() => { })
}
function submitEvent() {
  proxy.$refs["queryRef"].validate(valid => {
    if (valid) {
      const query = {
        ...queryParams.value,
        serviceType: queryParams.value.serviceType.join(','),
        servicePurpose: queryParams.value.servicePurpose.join(','),
      }
      if (!islogin.value) {
        // 判断是否登陆
        needLogin();
      } else {
        submit(query).then(res => {
          proxy.$modal.msgSuccess('提交成功');
          proxy.resetForm('queryRef')
        })
      }
    }
  });
}

function getType() {
  getPurpose({ plate: '定制服务' }).then(res => {
    option.value = res.data;
  })
}

// getType();
</script>

<style scoped lang="scss">
.content {
  padding: 0 100px;
  min-width: 600px;
}

.info {
  // text-indent: 2em;
  font-size: 18px;
  line-height: 36px;
}

.el-divider--horizontal {
  margin: 30px 0;
  border-color: #cad1e2;
}

:deep(.el-checkbox-button .el-checkbox-button__inner ){
  border: none;
  color: #333;
  font-weight: normal;
}
</style>